<template>
	<view>
		<view class="goods-banner">
			<swiper class="swiper-banner" :current="selectIndex" @change="swiperAct" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in  photos" :key="index">
					<image mode="aspectFill" :src="item"></image>
				</swiper-item>
			</swiper>
			<view class="goods-banner-num ft12">{{selectIndex+1}}/{{bannerNum}}</view>
		</view>
		<view class="bg-w pd30">
			<view class="ft18 ftw600 text-default">得力炫彩棒蜡笔旋转油画棒水溶性儿童安全彩绘丝滑旋转幼儿园彩笔画画笔</view>
			<view class="flex space alcenter mt20">
				<view>
					<text class="text-notice ft14">已兑：</text>
					<text class="ft14 text-default ftw600">20</text>
				</view>
				<view>
					<text class="text-notice ft14">剩余：</text>
					<text class="ft14 text-default ftw600">200</text>
				</view>
			</view>
			
			<view class="flex alcenter mt20">
				<image class="wh20" :src="'icon_diamond'"></image>
				<text class="ft16 ftw600 text-theme ml10">1000 + ¥15</text>
				<text class="text-line text-notice ft14 ml10">¥20</text>
			</view>
			
		</view>
		
		<view class="bg-w mt20 pd30">
			<view class="ft18 ftw600 text-default">兑换规则</view>
			<view class="mt20 ft14 text-main">
				1. 用户不限兑换该商品次数。
			</view>
			<view class="mt20 ft14 text-main">
				2. 兑换商品请按提示兑换地址到店兑换。
			</view>
			<view class="mt20 ft14 text-main">
				3. 积分不足可以通过签到等方式，获得足够积分。
			</view>
			<view class="mt20 ft14 text-main">
				4. 兑换该商品后且在核销前都可进行退款，过期自动退，可全额退款；积分原路返回
			</view>
		</view>
		
		<view class="bg-w mt20 pd30">
			<view class=" ft18 ftw600 text-default">
				详情介绍
			</view>
			<view class="exchange-detail mt30 ft14 text-info">
				这个是编辑器内容
			</view>
		</view>
		
		
		<view class="btn-exchange-footer-h"></view>
		<view class="btn-exchange-footer box-shadow-top">
			<view class="main-h plr30 flex alcenter">
				<navigator style="width: 100%;" url="/pages/exchange/order/goods">
				<button class="btn-main ft18 ftw600 text-w">立即兑换</button>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		computed:{
			bannerNum(){
				return this.photos.length;
			}
		},
		data(){
			return {
				selectIndex:0,
				photos:[
					this.$config.staticUrl + 'photo/01.jpg',
					this.$config.staticUrl + 'photo/02.jpg',
					this.$config.staticUrl + 'photo/03.jpg',
				]
			}
		},
		methods:{
			swiperAct(e){
				this.selectIndex = e.detail.current;
			},	
		}
	}
</script>

<style>
	.btn-exchange-footer-h{
		height: calc(142rpx + env(safe-area-inset-bottom));
	}
	.btn-exchange-footer{
		height: calc(142rpx + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		position: fixed;
		z-index: 10;
		background: #FFFFFF;
		left: 0;
		bottom: 0;
	}
	.btn-exchange-footer .main-h{
		height: 142rpx;
	}
	.goods-banner-num{
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		padding: 0 10rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 8rpx;
		background: rgba(0,0,0,.3);
		color:#FFFFFF;
	}
	.goods-banner{
		height: 750rpx;
		width: 100%;
		position: relative;
	}
	.swiper-banner{
		height: 750rpx;
		width: 100%;
	}
	.swiper-banner image{
		width: 100%;
		height: 750rpx;
	}
</style>